<template>
	<view v-if="info" class="aliay">
		<view v-if="info.binding==1" class="box">
			<view class="left">
				<image :src="info.iconUrl" mode=""></image>
				<view class="name">
					<!-- 钱桂英 -->
					{{info.realName}}
					<text>
						{{info.accountNo}}
						<!-- 13855245383 -->
					</text>
				</view>
			</view>
			<view  @click="Unbind(info.id)" class="right">
				解除绑定
			</view>
		</view>

		<view v-else  class="box">
			<view class="left">
				<image :src="info.iconUrl" mode=""></image>
				<view class="name">
					<!-- 支付宝账号 -->
					<text>尚未绑定</text>
				</view>
			</view>
			<view @click="bindAlipay" class="right">
				立即绑定
				<u-icon name="arrow-right" color="#FA4A53" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				// 是否已绑定：0否，1是
			}
		},
		onShow() {
			this.getRes()
		},
		methods: {

			getRes() {
				this.$u.api.cashAccountList({
						cashAccountType: 'ALIPAY'
					})
					.then(res => {
						this.info = res?.data?. [0]
					});
			},

			Unbind(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认作废吗？',
					// cancelColor:'#9b9b9b',//删除按钮颜色
					confirmColor: '#F23635', //确定按钮颜色
					success: function(res) {
						if (res.confirm) {
							that.$u.api.cashAccountUnbind({
									id
								})
								.then(res => {
									if (res.code == 'ok') {
										that.getRes()
									} else {
										uni.showToast({
											icon: "none",
											title: res.msg,
											duration: 3000
										})
									}
								});

						} else if (res.cancel) {

						}
					}
				});


			},
			bindAlipay() {
				uni.navigateTo({
					url: '/subPack/mine/bindAlipay'
				});
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	.aliay {
		margin: 16rpx 28rpx 0;

		.box {
			height: 86rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				.name {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;

					text {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(15, 20, 23, 0.6);
						line-height: 33rpx;
						margin-left: 8rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #FA4A53;
				// line-height: 33rpx;
				display: flex;
				align-items: center;
			}
		}
	}
</style>
